<!-- 填写信息 -->
<template>
    <div class="addIndividualBusiness">
        <div class="cont">
            <div class="flex spaceBetween item">
                <div class="label">上传经营者身份证</div>
            </div>
            <div class="flex justifyAround">
                <van-uploader accept="media" :after-read="afterRead" name="fornt">
                    <div class="flex flexColumn center">
                        <img class="idcardImg" :src="idCardFront != '' ? idCardFront : assetsAddress + '/employed/faceImg.png'" mode=""/>
                        <div class="imgDesc">身份证人像面</div>
                    </div>
                </van-uploader>
                <van-uploader accept="media" :after-read="afterRead" name="back">
                    <div class="flex flexColumn center">
                        <img class="idcardImg" :src="idCardBack != '' ? idCardBack : assetsAddress + '/employed/backImg.png'" mode=""/>
                        <div class="imgDesc">身份证反像面</div>
                    </div>
                </van-uploader>
            </div>
            <div class="flex spaceBetween item">
                <div class="label">*拍摄须知</div>
            </div>
            <div class="flex">
                <div class="allFlex descImg">
                    <img style="width: 100%" :src="assetsAddress + '/employed/successImg.png'" />
                </div>
                <div class="allFlex descImg">
                    <img style="width: 100%" :src="assetsAddress + '/employed/fialImg1.png'" />
                </div>
                <div class="allFlex descImg">
                    <img style="width: 100%" :src="assetsAddress + '/employed/fialImg2.png'" />
                </div>
                <div class="allFlex descImg">
                    <img style="width: 100%" :src="assetsAddress + '/employed/failImg3.png'" />
                </div>
            </div>
            <!-- 姓名 -->
            <van-field v-model="realName" label="姓名" placeholder="请输入姓名" :border="true" />
            <!-- 身份证号 -->
            <van-field v-model="idCard" label="身份证号" placeholder="请输入身份证号" :border="true" />
            <!-- 一寸照 -->
            <van-cell style="width: 375rpx;" title="一寸证照" isLink >
                <van-uploader accept="media" :after-read="afterRead" name="oneInch">
                    <div>{{oneInchPhoto == '' ? '上传' : '已上传'}}</div>
                </van-uploader>
            </van-cell>
            <!-- 联系手机 -->
            <van-field v-model="mobile" label="联系手机" placeholder="必须是法人本人手机，用于实名认证" :border="true" />
            <!-- 电子邮箱 -->
            <van-field v-model="email" label="电子邮箱" placeholder="用于接收电子发票" :border="true" />
            <!-- 银行卡号 -->
            <van-field v-model="bankCard" label="银行卡号" placeholder="必须是法人的银行卡号" :border="true" />
            <!-- 银行名称 -->
            <van-field v-model="bankName" label="银行名称" placeholder="银行名称及支行" :border="true" />
            <!-- 住所 -->
            <van-field v-model="residence" label="住所" placeholder="请输入地址信息" :border="true" />
            <!-- 邮政编码 -->
            <van-field v-model="postCode" label="邮政编码" placeholder="请输入所在地址的邮政编码" :border="true" />
            <!-- 民族 -->
            <van-field v-model="nation" label="民族" placeholder="请输入民族信息" :border="true" />
            <!-- 政治面貌 -->
            <van-field v-model="politicalStatus" @click="showPick('politicalStatus')" label="政治面貌" isLink readonly placeholder="请选择" :border="true" />
            <!-- 文化程度 -->
            <van-field v-model="eduLevel" @click="showPick('eduLevel')" label="文化程度" isLink readonly placeholder="请选择" :border="true" />
            <!-- 工作状态 -->
            <van-field v-model="careerStatus" @click="showPick('careerStatus')" label="工作状况" isLink readonly placeholder="请选择" :border="true" />
            <!-- 签名 -->
            <van-cell style="width: 375rpx;" @click="goSign" title="签名" isLink >
                <div>{{signPicUrl ? '已上传' : '请签名'}}</div>
            </van-cell>
        </div>
        <div class="btm" v-if="isAdd == '1'">
            <div class="flex alignCenter" style="margin-bottom: 7px;">
                <van-checkbox v-model="checked" shape="square">请阅读并同意<span @click.stop="showAgreement" class="theme">《用户协议》</span></van-checkbox>
            </div>
            <van-button @click="apply" type="primary" block>下一步</van-button>
        </div>

        <!-- 政治面貌、文化程度、职业状况下拉选择框 -->
        <van-popup v-model:show="showPicker" round position="bottom">
            <van-picker
                :columns="columns"
                @cancel="showPicker = false"
                @confirm="onPickerConfirm"
            />
        </van-popup>

        <mobileSign v-if="showSign" @increase="handleIncrease" @close="close" />
    </div>
</template>

<script>
import { ref, reactive, getCurrentInstance } from 'vue';
import { Uploader , Field , Cell , Button , Checkbox , Picker , Popup } from 'vant';
import mobileSign from './sign';
export default {
    components: {
        [Uploader.name]: Uploader,
        [Field.name]: Field,
        [Cell.name]: Cell,
        [Button.name]: Button,
        [Checkbox.name]: Checkbox,
        [Picker.name]: Picker,
        [Popup.name]: Popup,
        mobileSign,
    },
    setup() {
        const { proxy } = getCurrentInstance();
        const params = proxy.$route.params;
        const laborCompanyId = JSON.parse(params.laborCompanyId);
        const industry = JSON.parse(decodeURIComponent(params.industry));
        const isAdd = params.isAdd;

        const assetsAddress = proxy.assetsAddress;

        const idCardFront = ref(''); // 身份证正面照
        const idCardBack = ref(''); // 身份证反面照
        const oneInchPhoto = ref(''); // 一寸照
        // 上传文件
        const afterRead = (file,detail) => {
            console.log(detail,'detail')
            console.log(file)
            let name = detail.name;
            const formData = new FormData();
            formData.append('multipartFile', file.file);
            proxy.$http.industrialApi.uploadFile(formData)
            .then(res => {
                if(res.success){
                    var data = res.data;
                    switch (name) {
                        case 'fornt':
                            idCardFront.value = res.data;
                            break;
                        case 'back':
                            idCardBack.value = res.data;
                            break;
                        case 'oneInch':
                            oneInchPhoto.value = res.data;
                            break;
                        default:
                            break;
                    }
                }else{
                    proxy.showToast(res.errMessage);
                }
            })
        }

        // 身份信息
        const realName = ref(''); // 姓名
        const idCard = ref(''); // 身份证号
        const mobile = ref(''); // 手机号
        const bankName = ref(''); // 银行名称
        const bankCard = ref(''); // 银行卡号
        const email = ref(''); // 邮箱
        const checked = ref(false); // 
        const residence = ref(''); // 住所
        const postCode = ref(''); // 邮政编码
        const nation = ref(''); // 民族
        const politicalStatus = ref(''); // 政治面貌
        const eduLevel = ref(''); // 文化程度
        const careerStatus = ref(''); // 工作状况
        const signPicUrl = ref(''); // 签名

        // 确认申请
        const apply = () => {
            // const { checked , idCardFront , idCardBack , oneInchPhoto , bankName , bankCard , email , mobile , idCard , realName } = _this.data;
            if(!checked.value){
                proxy.showToast({message: '请阅读并同意用户协议！'})
                return;
            }
            if(idCardFront.value == ''){
                proxy.showToast({message: '请上传经营者身份证正面照！'})
                return;
            }
            if(idCardBack.value == ''){
                proxy.showToast({message: '请上传经营者身份证反面照！'})
                return;
            }
            if(oneInchPhoto.value == ''){
                proxy.showToast({message: '请上传经营者一寸证照！'})
                return;
            }
            if(realName.value == ''){
                proxy.showToast({message: '请输入姓名'})
                return;
            }
            if(idCard.value == ''){
                proxy.showToast({message: '请输入身份证号码'})
                return;
            }
            if(mobile.value == ''){
                proxy.showToast({message: '请输入法人联系手机号'})
                return;
            }
            if(email.value == ''){
                proxy.showToast({message: '请输入电子邮箱'})
                return;
            }
            if(bankCard.value == ''){
                proxy.showToast({message: '请输入银行卡号'})
                return;
            }
            if(bankName.value == ''){
                proxy.showToast({message: '请输入银行名称'})
                return;
            }
            proxy.$http.industrialApi.saveSelfEmplooyed({laborCompanyId: laborCompanyId,industry: industry,realName: realName.value,idCard: idCard.value,mobile: mobile.value,email: email.value,bankCard: bankCard.value,bankName: bankName.value,oneInchPhoto: oneInchPhoto.value,idCardFront: idCardFront.value,idCardBack: idCardBack.value,residence: residence.value,postCode: postCode.value,politicalStatus: politicalStatus.value,nation: nation.value,eduLevel: eduLevel.value,careerStatus: careerStatus.value,signPicUrl: signPicUrl.value})
            .then(res => {
                if(res.success){
                    proxy.showToast({message: '提交成功'})
                    history.go(-2);
                }else{
                    proxy.showToast({
                        message: res.errMessage,
                    })
                }
            })
        }

        const showAgreement = () => {
            proxy.$router.push({name: 'yonghufuwuyinsixieyi'})
        }

        const politicalList = ref([]); // 政治面貌列表
        const edulevelList = ref([]); // 文化程度列表
        const careerList = ref([]); // 职业状况列表
        const columns = ref([]); // 选择框信息
        const columnsType = ref(''); // 选择框类型
        const showPicker = ref(false);
        // 获取政治面貌猎豹
        const querySelfEmployedPolitical = () => {
            proxy.$http.industrialApi.querySelfEmployedPolitical()
            .then(res => {
                if(res.success){
                    politicalList.value = res.data;
                }else{
                    proxy.showToast({message: res.errMessage});
                }
            })
        }
        // 获取文化程度列表
        const querySelfEmployedEdulevel = () => {
            proxy.$http.industrialApi.querySelfEmployedEdulevel()
            .then(res => {
                if(res.success){
                    edulevelList.value = res.data;
                }else{
                    proxy.showToast({message: res.errMessage})
                }
            })
        }
        // 获取职业状况列表
        const querySelfEmployedCareer = () => {
            proxy.$http.industrialApi.querySelfEmployedCareer()
            .then(res => {
                if(res.success){
                    careerList.value = res.data;
                }else{
                    proxy.showToast({message: res.errMessage});
                }
            })
        }
        querySelfEmployedPolitical();
        querySelfEmployedEdulevel();
        querySelfEmployedCareer();

        const showPick = (type) => {
            let list = [];
            console.log(type,'type')
            switch (type) {
                case 'politicalStatus':
                    list = politicalList.value;
                    break;
                case 'eduLevel':
                    list = edulevelList.value;
                    break;
                case 'careerStatus':
                    list = careerList.value;
                    break;
                default:
                break;
            }
            let arr = []
            for (let index = 0; index < list.length; index++) {
                const item = list[index];
                const obj = {
                    'text': item,
                    'value': item,
                }
                arr.push(obj);
            }
            console.log(arr,'arr')
            columns.value = arr;
            columnsType.value = type;
            showPicker.value = true;
            console.log(columns.value,'columns')
        }
        const onPickerConfirm = ({ selectedValues }) =>{
            console.log(selectedValues,'selectedValues')
            switch (columnsType.value) {
                case 'politicalStatus':
                    politicalStatus.value = selectedValues[0];
                    break;
                case 'eduLevel':
                    eduLevel.value = selectedValues[0];
                    break;
                case 'careerStatus':
                    careerStatus.value = selectedValues[0];
                    break;
                default:
                break;
            }
            showPicker.value = false;
        }

        // 去签名
        const showSign = ref(false);
        const goSign = () => {
            // proxy.$router.push({name: 'sign'}).then(res => {
            //     console.log(res,'res')
            // })
            showSign.value = true;
        }
        const handleIncrease = (val) => {
            console.log(val,'val')
            if(val){
                const formData = new FormData();
                formData.append('multipartFile', val);
                proxy.$http.industrialApi.uploadFile(formData)
                .then(res => {
                    if(res.success){
                        signPicUrl.value = res.data;
                    }else{
                        proxy.showToast(res.errMessage);
                    }
                })
            }
            showSign.value = false;
        }
        const close = () => {
            showSign.value = false;
        }

        return {
            assetsAddress,
            isAdd,
            idCardFront,
            idCardBack,
            afterRead,
            oneInchPhoto,
            realName,
            idCard,
            mobile,
            bankName,
            bankCard,
            email,
            checked,
            apply,
            showAgreement,
            columns,
            columnsType,
            showPicker,
            residence,
            postCode,
            nation,
            showPick,
            onPickerConfirm,
            politicalStatus,
            eduLevel,
            careerStatus,
            goSign,
            showSign,
            handleIncrease,
            close,
            signPicUrl,
        }
    }
}

</script>
<style scoped>
.addIndividualBusiness{
    min-height: 100vh;
    background: #FFFFFF;
    padding-bottom: 120px;
    box-sizing: border-box;
}
.idcardImg{
    width: 170px;
    height: 100px;
}
/* 内容 */
.cont{
    padding-top: 10px solid #F3F5F7;
}
.item{
    padding: 12px 0;
    margin: 0 12px;
}
.label{
    font-size: 14px;
    font-weight: 500;
}
.imgDesc{
    font-size: 12px;
    margin-top: 5px;
    color: #999999;
}

.descImg{
    padding: 0 7px;
    box-sizing: border-box;
}

.btm{
    position: fixed;
    background: #F5F5F5;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 15px;
}
</style>